<template>
  <div class="micro-gas-wrap">
    <Dropdown trigger="click" placement="bottom-start" @on-click="handleChangeFunc">
      <Button type="info" size="small" :disabled="!showBtn">
        微用气量
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem v-for="item in showList" :name="item.value" :key="item.value">{{ item.label }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>

    <!-- 用气量统计 -->
    <Modal
      v-model="yqtjVisible"
      title="用气量统计"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
      @on-cancel="yqtjModalCancel"
    >
      <div :id="id()" :is="yqtjTpl" :chartData="yqtjChartData" :defaultOptions="yqtjOptions" />
      <div slot="footer">
        <Button type="primary" @click="yqtjModalCancel">确定</Button>
      </div>
    </Modal>
    <!-- 小时用气模式 -->
    <Modal
      v-model="xsyqmsVisible"
      title="小时用气模式"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
      @on-cancel="xsyqmsModalCancel"
    >
      <div :is="xsyqmsTpl" />
      <div slot="footer">
        <Button type="primary" @click="xsyqmsModalCancel">确定</Button>
      </div>
    </Modal>
    <!-- 残差分析 -->
    <Modal
      v-model="ccfxVisible"
      title="残差分析"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
      @on-cancel="ccfxModalCancel"
    >
      <div :id="id()" :is="ccfxTpl" :chartData="ccfxData" :defaultOptions="ccfxOptions" />
      <div slot="footer">
        <Button type="primary" @click="ccfxModalCancel">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import { compact, includes, each, merge } from 'lodash'
import { mainMixins, slgjMixins, yqltjMixins } from '../mixins'
import Xsyqms from '../Xsyqms'
import { yqtjOptions, ccfxOptions } from './chartOptions'

const { mapState, mapActions } = createNamespacedHelpers('historyVerify')

export default {
  name: 'history-verify-micro-gas',
  mixins: [mainMixins, slgjMixins, yqltjMixins],
  components: {
    Xsyqms,
    HBar3d: () => import('@/commons/charts/HBar3d')
  },
  data() {
    return {
      funcToolList: {
        xxlh: this.handleXxlhClick,
        hyxxlh: this.handleXxlhCancel,
        slgj: this.handleSlgj,
        hyslgj: this.handleSlgjCancel,
        yqltj: this.handleYqtjClick,
        xsyqms: this.handleXsyqmsClick,
        ccfx: this.handleCcfxClick
      },
      currentSelectedMarkLines: [],
      xsyqmsVisible: false,
      xsyqmsTpl: null,
      ccfxVisible: false,
      ccfxTpl: null,
      ccfxList: []
    }
  },
  computed: {
    ...mapState([
      'nearAnomalyTimeList',
      'qcycstForm',
      'slgjList',
      'slgjState',
      'xxlhState',
      'xxlhList',
      'currentMeterId',
      'yqtjList',
      'xxlhListIndexs',
      'xxlhParams'
    ]),
    id() {
      return nanoid
    },
    yqtjOptions() {
      return yqtjOptions
    },
    ccfxOptions() {
      return ccfxOptions
    },
    toolList() {
      return [
        {
          label: '线性拟合',
          value: 'xxlh',
          active: true
        },
        {
          label: '去除线性拟合',
          value: 'hyxxlh',
          active: this.xxlhState
        },
        {
          label: '索量估计',
          value: 'slgj',
          active: !this.slgjState
        },
        {
          label: '去除索量估计',
          value: 'hyslgj',
          active: this.slgjState
        },
        {
          label: '残差分析',
          value: 'ccfx',
          active: true
        },
        {
          label: '用气量统计',
          value: 'yqltj',
          active: true
        },
        {
          label: '残差分析',
          value: 'ccfx'
        },
        {
          label: '小时用气模式',
          value: 'xsyqms',
          active: true
        }
      ]
    },
    yqtjChartData() {
      const { listMap = [] } = this.yqtjList
      const _serList = []
      each(listMap, item => {
        const { minValue, maxValue, count } = item
        _serList.push({
          name: minValue + '-' + maxValue,
          y: count,
          min: minValue,
          max: maxValue
        })
      })
      return merge({}, yqtjOptions, {
        series: [
          {
            data: _serList
          }
        ]
      })
    },
    ccfxData() {
      const _serList = []
      each(this.ccfxList, item => {
        const { minValue, maxValue, count } = item
        _serList.push({
          name: minValue + '-' + maxValue,
          y: count,
          min: minValue,
          max: maxValue
        })
      })

      return merge({}, ccfxOptions, {
        series: [
          {
            data: _serList
          }
        ]
      })
    }
  },
  beforeDestroy() {
    document.removeEventListener('keyup', this.handleKeyup)
  },
  mounted() {
    this.bindEvent()
  },
  methods: {
    ...mapActions([
      'loadXxlhData',
      'changeSlgjState',
      'changeSlgjList',
      'changeXxlhState',
      'changeXxlhIndexs',
      'changeXxlhList',
      'changeXxlhParams',
      'loadYqltjData',
      'loadCcfxData'
    ]),
    bindEvent() {
      document.addEventListener('keyup', this.handleKeyup)
    },
    handleKeyup() {
      event.preventDefault()
      event.stopPropagation()
      if (event.ctrlKey && Number(event.keyCode) === 81) {
        const _list = compact(this.nearAnomalyTimeList)
        if (_list.length === 2) {
          this.handleXxlhClick()
        }
      }
    },
    handleXxlhClick() {
      const _list = compact(this.nearAnomalyTimeList)
      if (_list.length > 1) {
        this.changeXxlhState(true)
        const _startTime = _list[0][0]
        const _endTime = _list[1][0]
        const _str = _startTime + '-' + _endTime
        const _state = includes(this.currentSelectedMarkLines, _str)
        if (!_state) {
          this.currentSelectedMarkLines.push(_str)
          let _obj = {}
          const { min, max } = this.qcycstForm
          if (min !== max) {
            _obj = this.qcycstForm
          }
          this.loadXxlhData({
            ..._obj,
            list: [
              {
                startTime: _startTime,
                endTime: _endTime
              }
            ]
          })
        }
      } else {
        this.$Notice.warning({
          title: '操作提示',
          desc: '没有可操作的数据'
        })
      }
    },
    handleXxlhCancel() {
      this.changeXxlhState(false)
      this.changeXxlhIndexs([])
      this.changeXxlhList([])
      this.changeXxlhParams([])
      this.currentSelectedMarkLines = []
      this.handleSlgjCancel()
    },
    handleXsyqmsClick() {
      if (this.xxlhListIndexs.length !== 2) {
        return this.$Notice.warning({
          title: '操作提示',
          desc: '操作数据不完整请确认'
        })
      }
      this.xsyqmsVisible = true
      this.xsyqmsTpl = 'Xsyqms'
    },
    xsyqmsModalCancel() {
      this.xsyqmsVisible = false
      this.xsyqmsTpl = null
    },
    async handleCcfxClick() {
      if (this.xxlhListIndexs.length > 1) {
        return this.$Notice.warning({
          title: '操作提示',
          desc: '此操作不支持选择多条线'
        })
      }
      const _params = this.xxlhParams[this.xxlhListIndexs[0]]
      if (_params) {
        const { code, date } = await this.loadCcfxData({ ..._params })
        if (code === 200) {
          this.ccfxVisible = true
          this.ccfxTpl = 'HBar3d'
          this.ccfxList = date.list || []
        }
      } else {
        this.$Notice.warning({
          title: '操作提示',
          desc: '没有可以操作的数据'
        })
      }
    },
    ccfxModalCancel() {
      this.ccfxVisible = false
      this.ccfxTpl = null
      this.ccfxList = []
    }
  }
}
</script>
<style lang="less"></style>
